<template>
			
		<div>
      <div style="padding-bottom: 1.4rem" v-if='load'>
        <div class="search" @click="search()" >
          <img src="../../../src/assets/img/shouye/sousuo.png" alt="">
          <!-- <img src="static/img/shouye/sousuo.png" alt=""> -->
          搜索课程
        </div>
        <mt-swipe :auto="3000" class="img">
          <mt-swipe-item v-for="(item,index) in lunbo" :key="index" @click.native="tu(item,1)"><img :src="img+item.image" alt="" class="img"></mt-swipe-item>
        </mt-swipe>
				
			<!-- 轮播 -->
			<!-- <div class="swiper-loop">
				<el-carousel  :interval="3000" arrow="always">
					<el-carousel-item v-for="(item,index) in lunbo" @click="tu(item)">
							<div>
								<img :src="img+item.image" alt="">
							</div>
					</el-carousel-item>
				</el-carousel>
			</div> -->
				
				
        <div class="lesson">
         <div @click="zhiye()"><img src="../../assets/img/shouye/jinengtisheng1.png" alt=""><p>医学专升本</p></div>
         <div @click="jingpin()"><img src="../../assets/img/shouye/zhiyeyishi1.png" alt=""><p>护士资格证</p></div>
         <div @click="zhibo()"><img src="../../assets/img/shouye/zhibo1.png" alt=""><p>赛思直播</p></div>
         <div @click="jineng()"><img src="../../assets/img/shouye/zhuzhiyishi1.png" alt=""><p>学历提升</p></div>
        </div>

        <!--近期直播-->
        <div class="recent" v-if="!b">
          <p class="rec">
            <img src="../../../src/assets/img/shouye/bofang.png" alt="">
            <span>近期直播</span>
            <span @click.stop="allforecast()" style="color: #333;">全部预告</span>
          </p>
          <!-- <p  style="font-size:0.24rem;font-weight:bold;color:rgba(51,51,51,1);
line-height:0.32rem;margin-top: 0.25rem">近期暂无直播，请持续关注我们哦~</p> -->
					<div class="scroll-wrap">
							<div class="scroll-content">
								<div v-for="(item,index) in fore" @click="yu(item)" :class="{marquee_top:animate}">
									<div class="a" style="height: 0.9rem;position: relative">
											<p>{{item.name}}</p>
											<p>{{item.begin_time}} <span>{{item.honor}}{{item.teacher}}</span></p>
											<div v-if="item.live_status != 3||item.live_status != '3'">
												<button class="btnbtn" v-if="item.live_status == 2||item.live_status == '2'">正在直播</button>
												<button class="btnbtn" v-else-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">免费</button>
												<button class="btnbtn" v-else>￥{{item.price}}</button>
											</div>
											<div v-else>
												<button class="btnbtn" style="background: #C2C9D3;">直播结束</button>
											</div>
									</div>
								</div>
						</div>
					</div>
				</div>
		


        <!--热门课程-->
        <div class="hot">
          <span>热门课程</span>
          <img src="../../../src/assets/img/shouye/huo.png" alt="">
          <span class="span" @click="gd()">更多课程</span>
          <!--大图-->
          <div class="tan">
            <div class="tan1" v-for="(item,index) in hot" @click="hotke(item)">

                <img :src="img+item.thumb" alt="" class="pp">
                <p class="abc">{{item.name}}</p>
				<div class="pricespan">
					<p class="abc1">￥{{item.xprice}}</p>
					<p class="b1" v-if="item.price == 0">免费</p>
					<p class="b" v-else>￥{{item.price}}</p>
				</div>
            </div>
          </div>
        </div>
          <!--热门班级-->
          <div>
            <div class="hot">
              <span>热门班级</span>
              <img src="../../../src/assets/img/shouye/huo.png" alt="">
              <span class="span" @click="allclass()">全部班级</span>
            </div>
            <!--横向滚动-->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" style="width:5.6rem;" v-for="(item,index) in banji" @click="grade(item.id)">
                  <!-- <div style="padding-top: 0.25rem;"> -->
                    <div class="hotclass">
						<img :src="img+item.thumb" alt="" style="width: 5.3rem;height: 2.8rem;border-radius: 0.08rem">
						<p class="miaoshu">{{item.name}}</p>
						<div class="ce">
						  <!--左边照片-->
							<div class="leftImg">
								<div v-for="(i,dex) in item.teacher_list" v-if="dex<3">
									<img :src="img+i.avatar" alt="" >
									<p>{{i.name}}</p>
								</div>
							</div>
							<!--右边字-->	
							<div class="rightZ">
								<p v-if="Number(item.price)>0">¥{{item.price}}</p>
								<p v-else style="color: #0287FF;font-weight: 600;">免费</p>
								<p v-if="item.type == 1">普通班</p>
								<p class="right-border" v-if="item.type == ''||item.type == '0'||item.type == 0"></p>
								<p v-if="item.type == 2">保过班</p>
								<p>{{item.slogen}}</p>
							</div>
						</div>
						 <!--weiba-->
						<div class="btoS clearfix">
							<p v-if="item.start_time!=0||item.start_time!='0'"><img src="../../../src/assets/img/clock.png" alt="" style="width: 0.2rem;margin-right: 0.05rem;vertical-align: baseline">{{item.start_time}}—{{item.end_time}}</p>
							<p v-else>{{item.end_time}}</p>
							<p>{{item.sales}}人已加入</p>
							<!-- <p>{{item.fake_buy}}人已购买</p> -->
						</div>
                    </div>
                  <!-- </div> -->

                </div>

             </div>
            </div>

          </div>

          <!--再一次-->
          <div class="bto">
            <span>资讯中心</span>
            <span class="span1" @click="zixun()">更多资讯</span>
            <div class="ya" v-for="(item,index) in consult" @click="zi(item)">
              <img :src="img+item.images" alt="" class="img2">
              <div>
                <p style="width: 100%">{{item.title}}</p>
                <p class="p1">
                  <img src="../../../src/assets/img/shouye/dian.png" alt="" class="img1">
                  <span>{{item.comment}}</span>
                  <img src="../../../src/assets/img/shouye/yan.png" alt="" class="i">
                  <span>{{item.reading}}</span>
                </p>
              </div>
            </div>

          </div>
					
        </div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
		</div>
      <!--<Homepage :idx="0"></Homepage>-->
</template>

<script>
	// import Swiper from 'swiper';
    export default {
        name: "Shouye",
        data(){
            return{
			    load:false,
				lunbo:[],
				img:this.$store.state.img,
				fore:[],
				hot:[],
				banji:[],
				consult:[],
				activeIndex: 0,
				b:false,
				timer:null,
				animate:false,
				popupitem:'',
          }
      },
        computed: {
			top() {
			  return - this.activeIndex * 0.9 + 'rem';
			}
        },
		destroyed(){
			clearInterval(this.timer);
		},
		methods:{
			// 关闭广告弹窗
			clocegunag(){
				$('.shoewr-chenhoupasspopu').fadeOut();
			},
			// 技能研修
			jineng(){
				this.$router.push({
					path:'/yanxiu',
				})
			},
			//班级详情
			grade(id){
				this.$router.push({
					path:'/class',
					query:{
						bid:id
					}
				})
			},
			// 点击全部班级
			allclass(){
				this.$router.push({
					path:'/allclass'
				})
			},
			//点击执业医师
			zhiye(){
				this.$router.push({
					path:'/zhiye'
				})
			},
			//点击主治医师
			jingpin(){
			  this.$router.push({
				path:'/zhuzhi'
			  })
			},
			// 点击预告详情
			yu(item){
				var type = item.type;
				var id = item.id;
				if(type==1||type=='1'){
					this.$router.push({
						path:'/course',
						query:{
							cid:id
						}
					})
				}else if(type==2||type=='2'){
					this.$router.push({
						path:'/specialtopic',
						query:{
						  stid:id
						}
					})
				}else if(type==3||type=='3'){
					this.$router.push({
						path:'/class',
						query:{
						 bid:id
						}
					})
				}
			},
			// 点击banner跳转
			tu(item,num){
				var type = item.type;
				var id = item.other_id;
				var kind = item.kind;
				// window.location.href = item.url
				//type  1课程 2专题 3班级 4资讯 5活动 6H5链接
				if(type==1||type=='1'){
					this.$router.push({
						path:'/course',
						query:{
							cid:id
						}
					})
				
				}else if(type==2||type=='2'){
					this.$router.push({
						path:'/specialtopic',
						query:{
						 stid:id
						}
					})
				}else if(type==3||type=='3'){
					this.$router.push({
						path:'/class',
						query:{
						 bid:id
						}
					})
				}else if(type==4||type=='4'){
					this.$router.push({
						path:'/News',
						query:{
						 nid:id
						}
					})
				}else if(type==5||type=='5'){
					this.$router.push({
						path:'/huodong',
						query:{
						 id:id
						}
					})
				}else if(type==6||type=='6'){
					var url = item.url;
					window.location.href=url;
				}
				if(num==2){
					this.popupHits(item.id);
				}
			},
			// 点击搜索
			search(){
				this.$router.push({
					path:'/search',
					query:{
						type:1
					}
				})
			},
			// 点击直播
			zhibo(){
				this.$router.push({
					path:'/xiaoqi'
				})
			},
			//点击更多资讯
			zixun(){
			  this.$router.push({
				path:'/zixun'
			  })
			},
					// 点击全部预告
			allforecast(){
				this.$router.push({
				  path:'/forecast'
				})
			},
					// 点击更多课程
			gd(){
			  this.$router.push({
				path:'/xiaoqi'
			  })
			},
					// 点击课程  进入课程详情
			hotke(item){
				var type = item.type;
				this.$router.push({
					path:'/course',
					query:{
					cid:item.id
					}
				})
			},
					//资讯详情
			zi(item){
			  this.$router.push({
				path:'/News',
				query:{
				  nid:item.id
				}
			  })
			},
			showMarquee: function() {
				this.animate = true;
			
				setTimeout(() => {
					this.fore.push(this.fore[0]);
			
					this.fore.shift();
			
					this.animate = false;
				}, 500);
			},
			
		  },
		  mounted(){
			  
			  
			this.sdk.getJSSDK('','',this.$store.state.url);
				
			var url = this.$store.state.url;
				

			//获取预告
			this.axios.get(url + "Live/liveNotice").then(res=>{
			  // console.log(this.fore)
			  this.fore = res.data.data
			  if (this.fore.length > 0){
				this.b = false;
				if(this.fore.length>1){
					setInterval(this.showMarquee, 2000);
				}
			  } else {
				this.b = true
			  }
						
			})

			//获取首页banner
			this.axios.get(url + "home/banner",{
				params:{
					new:1
				}
			}).then(res=>{
				this.load=true;
				if (res.data.errcode == 0||res.data.errcode == '0'){
				  this.lunbo = res.data.data;
				}
			})

			//获取热门课程
			this.axios.get(url + "home/hotCourse",{
				params:{
					new:1
				}
			}).then(res=>{
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				var data = res.data.data;
				if(data.length>4){
					this.hot = data.slice(0,4);
				}else{
					this.hot = data;
				}
			  }
			})
					
			//获取热门班级
			this.axios.get(url + "home/hotClass").then(res=>{
			  if (res.data.errcode == 0||res.data.errcode == '0'){
					var data = res.data.data;
					// console.log(data);
					if(data.length>5){
						this.banji = data.slice(0,5);
					}else{
						this.banji = data;
					}
			  }
			})
					
					
			//获取咨询
			this.axios.get(url + "info/hotInfo").then(res=>{
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				this.consult = res.data.data
			  }
			})
		},
		updated: function () {
			//数据更改后初始化Swiper	
			if(this.banji.length > 0)
			{
				// console.log(889)
				this.$nextTick(function(){
					var swiper = new Swiper('.swiper-container', {
						slidesPerView: 'auto',
					});		
				})
			}
		}
    }
</script>

<style scoped>
	.showchen-contener{
		  position: relative;
			width: 5.4rem;
			border-radius: 0.08rem;
			top: 2.3rem;
			left: 50%;
			margin-left: -2.7rem;
	}
	.chenconpic{
		width: 5.4rem;
		height: 7.3rem;
		margin: auto;
		background: #fff;
	}
	.chenconpic img{
		width: 100%;
		height: 100%;
	}
	.chenclose{
		width: .62rem;
		height: .62rem;
		margin:.42rem auto;
	}
	.chenclose img{
		width: 100%;
		height: 100%;
	}
	.swiper-loop{
		width: 6.9rem;
		margin: .16rem auto 0;
		height: 3.88rem;
		overflow: hidden;
	}
	.swiper-loop img{
		width: 100%;
		height: 100%;
		border-radius: 0.1rem;
	}
	.el-carousel__container{
		height: 3.88rem !important;
	}
	.swiper-container{
		height: 5.2rem;
		margin-top: .2rem;
		padding-left: 0rem;
	}
	.marquee_top {
		transition: all 0.5s;
	
		margin-top: -0.9rem;
	}

  .hotclass{
    width: 5.3rem;
	padding-left: .3rem;
  }
  .swiper-slide{
	/* margin-left: .3rem; */
    text-align: justify;
  }
  /* .swiper-slide:last-child{
	  padding-right: .3rem;
  } */
  .miaoshu{
    height:0.61rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ce{
    /* margin-top: 0.25rem; */
  }
  .ce:after{
    content:'';
    display: block;
    clear: both;
  }
  .leftImg{
    float: left;
		
  }
  .leftImg div{
    display: inline-block;
    width: 0.8rem;
    text-align: center;
    font-size: 0.24rem;
  }
  .leftImg div img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
  }
  .leftImg p{
    margin-top: 0.05rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
  .rightZ{
    float: right;
    text-align: right;
  }
	.right-border{
		border: none !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}
  .rightZ p:nth-child(1),.rightZ p:nth-child(2){
    display: inline-block;
  }
  .rightZ p:nth-child(1){
    font-size:0.3rem;
    font-weight:800;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    /*margin-top: 0.1rem;*/
  }
  .rightZ p:nth-child(2){
    padding: 0 0.1rem 0 0.1rem;
    border:0.02rem solid rgba(255,2,20,1);
    border-radius:0.16rem;
    font-size: 0.24rem;
    color: #FF0214;
    margin-right: 0.02rem;
    margin-top: 0.07rem;
  }
  .rightZ p:nth-child(3){
    width: 2.6rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    overflow: hidden;
    margin-top: 0.15rem;
    font-size:0.24rem;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }

  .btoS{
    width: 100%;
    margin-top: 0.1rem;
  }
  .btoS p:nth-child(1){
    float: left;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .btoS p:nth-child(2){
    float: right;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }






  .scroll-wrap{
    width: 100%;
    height: 0.9rem;
    overflow: hidden;
  }

  .scroll-content {
    position: relative;
    transition: top 0.5s;
  }

    .search{
      width: 92%;
      margin: auto;
      height: 0.56rem;
      margin-top: 0.16rem;
      background:rgba(240,240,240,1);
      border:0.01rem solid rgba(237,237,237,1);
      border-radius:0.28rem;
      font-size:0.24rem;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .search img{
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.05rem;
    }
  .img{
    width: 6.9rem;
		margin: auto;
    /* width: 100%; */
    height: 3.38rem;
    margin-top: 0.16rem;
    border-radius: 0.1rem;
  }
  .lesson{
    width: 6.9rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
  }
  .lesson div{
    /* width: 1.15rem; */
    font-size:0.28rem;
    text-align: center;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .lesson img{
    width: 1.05rem;
    height: 1.05rem;
  }
  .lesson p{
  	margin-top: .1rem;
		
  }
  .recent{
    width: 92%;
    margin: auto;
    height:1.6rem;
    background:rgba(247,247,247,1);
    border-radius:0.08rem;
    margin-top: 0.5rem;
    box-sizing:border-box;
    padding: 0.28rem 0.2rem 0.3rem 0.18rem;
  }
  .rec img{
    width: 0.3rem;
    height: 0.3rem;

  }
  .rec span:nth-child(2){
    font-size:0.28rem;
    font-weight:800;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .rec span:nth-child(3){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    float: right;
  }
  .a{
    width: 100%;
    margin-top: 0.1rem;
    float: left;
    /*position: relative;*/
  }
  .a p:nth-child(1){
    width: 80%;
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .a p:nth-child(2){
    width: 80%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size:0.22rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    text-align: left;
  }
  .btnbtn{
    width:1.3rem;
    height:0.44rem;
    background:rgba(2,135,255,1);
    border-radius:0.22rem;
    outline: none;
    color: #fff;
    border: none;
    position: absolute;
    right: 0rem;
    top:0.2rem;
  }
  .myfont{
    font-size:0.24rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
  }
  .myfont2{
    margin-left: 0.1rem;
    font-size:0.22rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  .hot{
    width: 92%;
    margin: auto;
    margin-top: 0.5rem;
  }
  .hot span:nth-child(1){
    font-size:0.34rem;
    font-weight:800;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .hot img:nth-child(2){
    width: 0.3rem;
    height: 0.3rem;
  }
  .span{
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    float: right;
  }
  .tan{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tan1{
    width: 48%;
    margin-top: 0.3rem;
    position: relative;
  }
  .pp{
    width: 100%;
    height: 1.9rem;
    border-radius: 0.1rem;
  }

  .abc{
    width: 100%;
    /* height: 0.62rem; */
    margin-top: 0.19rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    overflow : hidden;
    text-overflow: ellipsis;
    overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
	.pricespan{
		display: flex;
		justify-content: space-between;
		margin-top: 0.34rem;
		/* border: 1px solid #777; */
	}
  .abc1{
		margin-top: 0.08rem;
    font-size:0.24rem;
    text-decoration:line-through;
    color:rgba(194,201,211,1);
		/* border: 1px solid #000; */
  }
    .b{
      font-size:0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
			/* border: 1px solid #000; */
    }
    .b1{
      font-size:0.3rem;
      font-weight:bold;
      color:#0287FF;
      line-height:0.32rem;
      float: right;
      display: inline-block;
      margin-top: 0.15rem;
    }
  .bto{
    width: 92%;
    margin: auto;
    margin-top: 0.45rem;
  }
  .bto span:nth-child(1){
    font-size:0.34rem;
    font-weight:800;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
    .span1{
      font-size:0.24rem;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
      float: right;
    }
  .ya{
    width: 100%;
    height: 1.18rem;
    margin-top: 0.3rem;
  }
  .img2{
    width: 2.1rem;
    height: 100%;
    float: left;
    border-radius:0.08rem;
  }
  .ya div{
    height: 100%;
    margin-left: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .ya div p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .img1{
    width: 0.3rem;
    height: 0.3rem;
  }
  .i{
    width: 0.3rem;
    height: 0.3rem;
    margin-left: 0.2rem;
  }
  .p1 span{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }

</style>
